<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<!--css-->
		<style type="text/css">
			body {
				margin: 0;
				font-family: "Helvetica,Arial,FreeSans";
				color: #000000;
				font-size: 12px;
			}
			
			.demo_main {
				padding: 20px;
				padding-top: 10px;
			}
			
			.demo_title {
				padding: 10px;
				margin-bottom: 10px;
				background-color: #D3D8E0;
				border: solid 1px gray;
			}
			
			.demo_content {
				padding: 10px;
				margin-bottom: 10px;
				border: solid 1px gray;
			}
			
			fieldset {
				border: 1px solid gray;
			}
		</style>
		<!--javascript-->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-3.2.1.js"></script>
		<script src="../../js/global.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=oj64LwtVsuHuY7eXFX1ChVQRfZPk8rkS"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="headView">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">气象站</h1>
		</header>
		<div class="mui-content">
			<div style="width: 100%;position: absolute;height: 100%;" id="map">
			</div>
		</div>
		<script type="text/javascript">
			mui.plusReady(function() {});
			$(document).ready(function() {
				initMap();
			});
			var map = new BMap.Map("map"); //Map实例    
			var markerArr = []; //数据点数组

			map.enableScrollWheelZoom(true);
			var ctrlNav = new window.BMap.NavigationControl({
				anchor: BMAP_ANCHOR_TOP_LEFT,
				type: BMAP_NAVIGATION_CONTROL_LARGE
			});
			map.addControl(ctrlNav);

			function initMap() {
				mui.ajax({
					url: WEATHER_STATION_MAP_MAKERS,
					type: 'get',
					dataType: 'json',
					timeout: 10000,
					success: function(data) {
						//console.log(JSON.stringify(data.obj.data))
						markerArr = data.obj.data;
						setZoom(markerArr); //智能设置中心坐标和比例
						for(var i = 0; i < markerArr.length; i++) {
							var lat = markerArr[i].stationLat;
							var lng = markerArr[i].stationLng;
							addMarker(new window.BMap.Point(lng, lat), i);
						}
					},
					error: function() {
						mui.toast("暂无数据")
					}
				});

			}

			// 添加标注    
			function addMarker(point, i) {
				var myCompOverlay = new ComplexCustomOverlay(point, i, markerArr[i].stationAddress,markerArr[i].stationCode);
				map.addOverlay(myCompOverlay);
				return myCompOverlay;
			}

			function switchPage(i, address) {
				//传送地址、站点code
				plus.storage.setItem("stationAddress", address);
				plus.storage.setItem("stationCode", markerArr[i].stationCode);

				mui.openWindow({
					url: 'stationInfo.html',
					id: 'stationInfo.html',
					show: {
						anishow: 'pop-in'
					},
					styles: {
						popGesture: 'close'
					},
					waiting: {
						autoshow: true
					}
				});
			}

			//根据原始数据计算中心坐标和缩放级别，并为地图设置中心坐标和缩放级别。
			function setZoom(markerArr) {
				if(markerArr.length > 0) {
					var maxLng = markerArr[0].stationLng;
					var minLng = markerArr[0].stationLng;
					var maxLat = markerArr[0].stationLat;
					var minLat = markerArr[0].stationLat;
					var res;
					for(var i = markerArr.length - 1; i >= 0; i--) {
						res = markerArr[i];
						if(res.stationLng > maxLng) maxLng = res.stationLng;
						if(res.stationLng < minLng) minLng = res.stationLng;
						if(res.stationLat > maxLat) maxLat = res.stationLat;
						if(res.stationLat < minLat) minLat = res.stationLat;
					};
					var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2;
					var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2;
					var zoom = getZoom(maxLng, minLng, maxLat, minLat);
					map.centerAndZoom(new BMap.Point(cenLng, cenLat), zoom*1.1);
				} else {
					//没有坐标，显示全中国
					map.centerAndZoom(new BMap.Point(112.410562192, 31.2093162501), 10);
				}
			}

			//根据经纬极值计算绽放级别。
			function getZoom(maxLng, minLng, maxLat, minLat) {
				var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"] //级别18到3。
				var pointA = new BMap.Point(maxLng, maxLat); // 创建点坐标A
				var pointB = new BMap.Point(minLng, minLat); // 创建点坐标B
				var distance = map.getDistance(pointA, pointB).toFixed(1); //获取两点距离,保留小数点后两位
				for(var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
					if(zoom[i] - distance > 0) {
						return 18 - i + 3; //之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
					}
				};
			}

			//设置地图标注
			function ComplexCustomOverlay(point, index, address,code) {
				this._point = point;
				this._index = index;
				this._address = address;
				this._code = code;
			}
			ComplexCustomOverlay.prototype = new BMap.Overlay();
			ComplexCustomOverlay.prototype.initialize = function(map) {
				this._map = map;
				var div = this._div = document.createElement("div");
				div.style.position = "absolute";
				div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
				div.style.backgroundColor = "#EE5D5B";
				div.style.color = "white";
				div.style.height = "20px";
				div.style.padding = "2px";
				div.style.lineHeight = "18px";
				div.style.MozUserSelect = "none";
				div.style.border = "none";
				div.style.fontSize = "14px"
				var span = this._span = document.createElement("span");
				span.style.fontSize = "12px";
				div.style.width = (this._address.length * 12 + 6) + "px"
				div.appendChild(span);
				var code = this._code;
				if(code == null || code ==''){
					span.style.background = "none";
					div.style.filter = "alpha(opacity:50)";
					div.style.opacity = "0.5";
				}

				span.innerText = this._address; //添加地址
				var that = this;
				var index = this._index;
				var address = this._address;
	
				var arrow = this._arrow = document.createElement("div");
				arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
				arrow.style.position = "absolute";
				arrow.style.width = "12px";
				arrow.style.height = "10px";
				arrow.style.top = "20px";
				arrow.style.left = "2px";
				arrow.style.overflow = "hidden";
				div.appendChild(arrow);

				//由于onclick事件只能在pc响应，手机上响应ontouchstart
				div.ontouchstart = function() {
					if(code == null || code ==''){
						mui.toast("气象站设备未安装，暂无数据");
					}else{
						switchPage(index, address);
					}
				}
				map.getPanes().labelPane.appendChild(div);

				return div;
			}
			ComplexCustomOverlay.prototype.draw = function() {
				var map = this._map;
				var pixel = map.pointToOverlayPixel(this._point);
				this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
				this._div.style.top = pixel.y - 30 + "px";
			}
		</script>
	</body>

</html>